<template>
	<view class="address-box">
		<!-- 地址 -->
		<view class="address-item public345" v-for="item in addressData" :key="item.id">
			<view class="add-address-info">
				<!-- 左侧信息 -->
				<view class="address-item-left">
					<view class="user-name-phone">
						<view class="user-name">
							{{item.name}}
						</view>
						<view :class="item.isFirst?'user-phone default':'user-phone'">
							{{item.phone}}
						</view>
					</view>
					<view class="user-all-address">
						{{item.adrFirst}}{{item.adrLast}}
					</view>
				</view>
				<!-- 右侧修改 -->
				<view class="address-item-right">
					<uni-icons type="compose" size="40rpx" @click="rewriteAddress(item)"></uni-icons>
				</view>
			</view>

			<view class="address-item-action">
				<view class="default-address">
					<uni-icons :type="item.isFirst?'checkbox-filled':'circle'" :color="item.isFirst?'#FF7803':'#ccc'"
						size="40rpx" style="vertical-align: bottom;margin-right: 8rpx;"
						@click="setDefaultAddress(item.id)"></uni-icons>
					默认地址
				</view>
				<view class="delete-address" @click="deleteAddress(item.id)">
					删除
				</view>
			</view>
		</view>

		<!-- 底部新建地址按钮 -->
		<view class="add-address-btn" @click="goAddAdress">
			<text class="btn">新建地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地址数据
				addressData: [{
					id: 1,
					name: '黄润平',
					phone: '18070535312',
					isFirst: true,
					adrFirst: '内蒙古,赤峰市,宁城县',
					adrLast: '八里罕港业园区881号'
				}, {
					id: 2,
					name: '罗伊',
					phone: '18070535312',
					isFirst: false,
					adrFirst: '内蒙古,赤峰市,宁城县',
					adrLast: '八里罕港业园区881号罗伊八里罕港业园区881号罗伊'
				}, {
					id: 3,
					name: '张三',
					phone: '18070535312',
					isFirst: false,
					adrFirst: '内蒙古,赤峰市,宁城县',
					adrLast: '八里罕港业园区881号张三'
				}, {
					id: 4,
					name: '李四',
					phone: '18070535312',
					isFirst: false,
					adrFirst: '内蒙古,赤峰市,宁城县',
					adrLast: '八里罕港业园区881号李四'
				}]
			}
		},
		methods: {
			// 设置默认地址
			setDefaultAddress(id) {
				// console.log('setDefaultAddress', id)
				const that = this
				uni.showModal({
					title: '是否设为默认地址',
					confirmColor: '#FF7803',
					success(res) {
						if (res.confirm) {
							that.addressData.forEach(i => {
								if (i.id === id) {
									i.isFirst = true
								} else {
									i.isFirst = false
								}
							})
						}
					}
				})
			},
			// 删除地址
			deleteAddress(id) {
				// console.log('deleteAddress', id)
				const that = this
				uni.showModal({
					title: '是否删除',
					confirmColor: '#FF7803',
					success(res) {
						// confirm为true时 表示用户点击了确认
						if (res.confirm) {
							that.addressData = that.addressData.filter(i => i.id != id)
						}
					}
				})
			},
			// 跳转新建地址页面
			goAddAdress() {
				uni.navigateTo({
					url: '/pages/address/AddAddress'
				})
			},
			// 重写地址
			rewriteAddress(item) {
				uni.navigateTo({
					url: `/pages/address/AddAddress?item=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-box {
		width: 100vw;
		font-size: 28rpx;
		box-sizing: border-box;

		// 地址项
		.address-item {
			width: 690rpx;
			border-radius: 18rpx;
			background-color: #fff;
			margin: 18rpx auto 0;

			.add-address-info {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f8f8f8;

				// 地址左侧盒子
				.address-item-left {

					// 用户姓名和手机号
					.user-name-phone {
						display: flex;
						// justify-content: space-between;
						width: 380rpx;
						font-weight: 600;
						color: #333;
						line-height: 88rpx;

						.user-name {
							margin-right: 32rpx;
						}

						.user-phone {
							position: relative;

							// 默认地址
							&.default::after {
								position: absolute;
								top: 26rpx;
								right: -80rpx;
								content: '默认';
								display: inline-block;
								width: 64rpx;
								border-radius: 8rpx;
								text-align: center;
								line-height: 32rpx;
								background: #FF7803;
								color: #fff;
								font-size: 24rpx;
							}
						}
					}

					// 用户地址
					.user-all-address {
						width: 600rpx;
						padding-bottom: 32rpx;
						color: #666;
						font-size: 26rpx;
						line-height: 40rpx;
					}
				}

				// 地址右侧修改图标
				.address-item-right {
					padding-top: 80rpx;
				}
			}

			// 设置为默认地址 删除
			.address-item-action {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				line-height: 60rpx;
				color: #666;

				.default-address {}
			}
		}

		.add-address-btn {
			position: fixed;
			bottom: 0;
			padding: 16rpx 30rpx;
			background-color: #fff;

			// 小程序 底部
			// 兼容 IOS 11.2 以下
			// padding-bottom: constant(safe-area-inset-bottom);
			// 兼容 IOS 11.2 以上
			// padding-bottom: env(safe-area-inset-bottom);

			// 预设一个高度
			padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

			.btn {
				display: inline-block;
				width: 690rpx;
				height: 88rpx;
				border-radius: 44rpx;
				background: #FF7803;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>